<template>
  <div class="medication-record-container">
    <el-card title="用药记录">
      <div v-if="editable" class="add-medication-btn">
        <el-button type="primary" @click="showAddDialog = true">添加用药记录</el-button>
      </div>

      <el-table :data="data.medications || []" border style="width: 100%">
        <el-table-column prop="name" label="药品名称" width="180"></el-table-column>
        <el-table-column prop="dosage" label="剂量" width="120"></el-table-column>
        <el-table-column prop="frequency" label="用药频率" width="150"></el-table-column>
        <el-table-column prop="startDate" label="开始日期" width="150"></el-table-column>
        <el-table-column prop="endDate" label="结束日期" width="150"></el-table-column>
        <el-table-column prop="purpose" label="用药目的"></el-table-column>
        <el-table-column label="操作" width="180" v-if="editable">
          <template #default="{ row }">
            <el-button size="small" @click="handleEdit(row)">编辑</el-button>
            <el-button size="small" type="danger" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 添加/编辑对话框 -->
      <el-dialog v-model="showAddDialog" title="{{ dialogTitle }}" width="600px">
        <el-form :model="formData" label-width="120px">
          <el-form-item label="药品名称" required>
            <el-input v-model="formData.name" placeholder="请输入药品名称"></el-input>
          </el-form-item>
          <el-form-item label="剂量" required>
            <el-input v-model="formData.dosage" placeholder="请输入剂量"></el-input>
          </el-form-item>
          <el-form-item label="用药频率" required>
            <el-input v-model="formData.frequency" placeholder="如：每日三次"></el-input>
          </el-form-item>
          <el-form-item label="开始日期" required>
            <el-date-picker
              v-model="formData.startDate"
              type="date"
              placeholder="选择开始日期"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="结束日期">
            <el-date-picker
              v-model="formData.endDate"
              type="date"
              placeholder="选择结束日期"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="用药目的">
            <el-input v-model="formData.purpose" placeholder="请输入用药目的"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="showAddDialog = false">取消</el-button>
          <el-button type="primary" @click="handleDialogSave">保存</el-button>
        </template>
      </el-dialog>
    </el-card>
  </div>
</template>

<script setup>
import { defineProps, defineEmits, ref, watch } from 'vue';
import { ElCard, ElTable, ElTableColumn, ElButton, ElDialog, ElForm, ElFormItem, ElInput, ElDatePicker } from 'element-plus';
import { ElMessage } from 'element-plus';

// 定义props
const props = defineProps({
  data: {
    type: Object,
    required: true,
    default: () => ({ medications: [] })
  },
  editable: {
    type: Boolean,
    default: false
  }
});

// 定义emits
const emit = defineEmits(['update:data']);

// 状态变量
const showAddDialog = ref(false);
const dialogTitle = ref('添加用药记录');
const formData = ref({});
const currentEditingIndex = ref(-1);
const medications = ref([...props.data.medications || []]);

// 监听props.data变化，更新本地数据
watch(() => props.data,
  (newData) => {
    medications.value = [...newData.medications || []];
  },
  { deep: true }
);

// 处理编辑
const handleEdit = (row) => {
  currentEditingIndex.value = medications.value.indexOf(row);
  formData.value = { ...row };
  dialogTitle.value = '编辑用药记录';
  showAddDialog.value = true;
};

// 处理删除
const handleDelete = (row) => {
  const index = medications.value.indexOf(row);
  medications.value.splice(index, 1);
  emit('update:data', { ...props.data, medications: [...medications.value] });
  ElMessage.success('删除成功');
};

// 处理对话框保存
const handleDialogSave = () => {
  if (currentEditingIndex.value === -1) {
    // 添加新记录
    medications.value.push({ ...formData.value });
  } else {
    // 更新现有记录
    medications.value[currentEditingIndex.value] = { ...formData.value };
  }

  emit('update:data', { ...props.data, medications: [...medications.value] });
  showAddDialog.value = false;
  formData.value = {};
  currentEditingIndex.value = -1;
  dialogTitle.value = '添加用药记录';
  ElMessage.success('保存成功');
};
</script>

<style scoped>
.medication-record-container {
  padding: 10px;
}

.add-medication-btn {
  margin-bottom: 15px;
  text-align: right;
}
</style>